<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2020/11/12
  Time: 9:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>图书管理系统</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">


</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">图书管理系统</div>

        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制中心</a></li>
            <li class="layui-nav-item"><a href="">图书管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <%--<li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>--%>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    ${sessionScope.get("user").username}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="hbkNavbar">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">基本功能</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" >密码修改</a>
                        </dd>
                        <dd><a href="javascript:;" data-options="{url:'AddUser.jsp',title:'增加用户',id:'12'}">增加用户</a></dd>
                        <dd><a href="javascript:;" data-options="{url:'DeleteUser.jsp',title:'删除用户',id:'13'}">删除用户</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">图书管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-options="{url:'ViewIndexServlet',title:'图书列表',id:'21'}">图书列表</a>
                        </dd>
                        <dd><a href="javascript:;" data-options="{url:'SelectBookList',title:'图书查找',id:'22'}">图书查找</a>
                        </dd>

                    </dl>
                </li>
                <%--<li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">发布商品</a></li>--%>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->

        <div class="layui-tab" lay-filter="tabs" lay-allowClose="true" id="mytabs">
            <ul class="layui-tab-title">
                <li class="layui-this">首页</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">首页内容</div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © blank 2020
    </div>
</div>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
        element.on('nav(hbkNavbar)',function(elem){
            /*使用DOM操作获取超链接的自定义data属性值*/
            console.log(elem);
            //把JSON串变成我们JS对象格式
            var options =  eval('('+elem.context.dataset.options+')');
            var title = options.title;
            var url = options.url;
            var id=options.id;
            //获取当前id在这个tabs里面的长度
            var li = $("li[lay-id="+id+"]").length;
            console.log(li);
            //如果大于0证明tabs里面已经有这个标签卡了，切换
            if(li>0)
            {
                element.tabChange('tabs',id);
            }
            //否则添加
            else{
                element.tabAdd('tabs',{
                    title : title,
                    content : '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:500px;"></iframe>',
                    id: id
                });
                element.tabChange('tabs',id);
            }
        });

        /*使用下面的方式需要引用jquery*/
        /* $('.layui-nav-child a').click(function () {
             var options = eval('('+$(this).data('options')+')');
             var url = options.url;
             var title = options.title;
             element.tabAdd('tabs',{
                 title : title,
                 content : '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>'
             });
         });*/
    });
</script>
</body>
</html>


<%--<script type="text/javascript">
    function borrow(id) {
        $.ajax({
            url: 'BorrowBookServlet',
            method: 'post',
            data: {'id': id},
            success: function (res) {

                if (res == "success") {
                    alert("借阅成功");
                } else {
                    alert("图书已借走或不在了");

                }
            }
        })
    }
</script>--%>
<%--<table>
    <tr>
        <th>操作</th>
        <th>书名</th>
        <th>类型</th>
        <th>作者</th>
        <th>借阅</th>
    </tr>
    <c:forEach var="book" items="${sessionScope.booklist}">
        <tr>
            &lt;%&ndash;<td><input type="radio" value="${book.id}" name="op"></td>&ndash;%&gt;
            <td>${book.bookName}</td>
            <td>${book.bookType}</td>
            <td>${book.editor}</td>
            <td>
                <button  onclick="borrow(${book.id})">借阅</button>
            </td>
        </tr>
    </c:forEach>

</table>--%>

